<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="disabled">
      <a-form-model layout="horizontal" ref="subForm" slot="detail" :model="model" :rules="validatorRules" v-bind="formItemLayout">
        <z-form-item :datas="fieldArr" :form="model" :rules="validatorRules" :gutter="0" @change="getChange" @rows="onRows" />
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>
import { remoteControlApply } from '@/api/sjsk/personService'
import { queryDepartByArea } from '@/api/api'
  export default {
    props: {
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model: {},
        confirmLoading: false,
        formItemLayout: {
          labelCol: { span: 6 },
          wrapperCol: { span: 16 }
        },
        fieldArr: [
          {label: '姓名', prop: 'realName', tagType: 'input', disabled: true},
          {label: '别名/绰号', prop: 'nickName', tagType: 'input', disabled: true},
          {label: '籍贯', prop: 'country', tagType: 'input', disabled: true},
          {label: '民族', prop: 'nation', tagType: 'dict-select', dictCode:'sex', disabled: true},
          {label: '出生日期', prop: 'birthday', tagType: 'date-picker', format: 'YYYY-MM-DD', showTime:false, disabled: true},
          {label: '性别', prop: 'sex', tagType: 'dict-select', dictCode:'sex', disabled: true},
          {label: '身份证号', prop: 'identityCard', tagType: 'input', disabled: true},
          {label: '手机号码', prop: 'phone', tagType: 'input', disabled: true},
          {label: '户籍地详址', prop: 'householdAddress', tagType: 'input', disabled: true},
          {label: '户籍地派出所', prop: 'suspectAccountNumber', tagType: 'input', disabled: true},
          {label: '当前管控状态（类型）', prop: 'controlPersonType', tagType: 'dict-select', dictCode:'sjsk_type', disabled: true},
          {label: '风险类别', prop: 'riskLevel', tagType: 'dict-select', dictOptions: [{ text: '高风险', value: '1' },{ text: '中风险', value: '2' },{ text: '低风险', value: '3' }], disabled: true},
          {label: '当前管控责任人', prop: 'managerName', tagType: 'input', disabled: true},
          {label: '联系电话', prop: 'managerPhone', tagType: 'input', disabled: true},
          {label: '异地管控类型', prop: 'controlType', tagType: 'dict-select', dictOptions: [{ text: '省内异地管控', value: '1' },{ text: '省外异地管控', value: '2' }],},
          {label: '涉网信息情况', prop: 'networdInfoSituation', tagType: 'textarea', placeholder: '请输入人员涉网信息（QQ 、微信号、微博、抖音号、快手号、论坛账号等各类涉网信息）'},
          {label: '居住地详址', prop: 'currentAddress', tagType: 'input'},
          {label: '居住地执行社区', prop: 'levels', tagType: 'linkage-area'},
          {label: '居住地派出所', prop: 'currentPoliceStation', tagType: 'input', disabled: true},
          {label: '申请异地管控时间', prop: 'applyControlDate', tagType: 'date-picker', format: 'YYYY-MM-DD'},
          {label: '申请异地管控原因', prop: 'applyControlReason', tagType: 'textarea'},
          {label: '证明材料', prop: 'file', tagType: 'upload-file', fileDescribe: '申请异地管控的理由依据和居住证，或者居住地住址、就业、就读等相关证明材料附件；', fileFormat: '.doc,.docx,.xls,.xlsx,.pdf,.jpg,.jpeg,.png'},
        ],
        validatorRules: {
          controlType:[ { required: true, message: '请选择异地管控类型!' }],
          currentAddress:[ { required: true, message: '请输入居住地详址!' }],
          levels:[ { required: true, type: 'array', message: '请选择居住地执行社区!' },],
          applyControlDate:[ { required: true, message: '请选择申请异地管控时间' },],
          applyControlReason:[ { required: true, message: '请填入申请异地管控原因!' },],
          file:[ { required: true, message: '请上传证明材料!' }],
        }
      }
    },
    methods: {
      show (record) {
        // this.model = record?Object.assign({}, record):this.model;
        this.$set( this.model, 'controlPersonId', record.id )
        this.$set( this.model, 'controlPersonType', record.controlPersonType? record.controlPersonType: 1 ) //管控人员类型 1：社戒社康 2：社会面人员
        this.$set( this.model, 'controlStatus', 1 ) // 管控状态：1、异地管控 2、撤销异地管控
        this.$set( this.model, 'realName', record.realName )
        this.$set( this.model, 'country', record.country )
        this.$set( this.model, 'nickName', record.nickName )
        this.$set( this.model, 'birthday', record.birthday )
        this.$set( this.model, 'nation', record.nation )
        this.$set( this.model, 'sex', record.sex )
        this.$set( this.model, 'identityCard', record.identityCard )
        this.$set( this.model, 'phone', record.phone )
        this.$set( this.model, 'householdAddress', record.householdAddress )
        this.$set( this.model, 'riskLevel', record.highRiskSituation )
        this.$set( this.model, 'managerName', record.belongManagerName )
        this.$set( this.model, 'managerPhone', record.belongManagerPhone )
      },
      submitForm () {
        const parameter = Object.assign({}, this.model)
        console.log(parameter)
        this.$refs.subForm.validate((valid)=> {
          if (valid) {
            this.confirmLoading = true
            remoteControlApply(parameter)
              .then(res => {
                this.confirmLoading = false
                if (res.success) {
                  this.$message.success(res.message)
                  this.$emit('ok');
                } else {
                  this.$message.warn(res.message)
                }
              })
              .catch(e => {
                this.$message.warn('请求失败！')
                this.confirmLoading = false
              })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      getChange(prop, value) {
        if(prop==='levels') {
          let lastData = value.length>0?value[value.length-2]:''
          this.$set(this.model, 'level', value.toString())
          if(value && value.length===5) this.getQueryDepartByArea(lastData)
        }
      },
      onRows(prop, labels) {
        if(prop==='levels') {
          let label = labels? labels.map(v=>v.title): ''
          this.$set(this.model,'currentTown', label.toString())
        }
      },
      // 通过执行社区筛选派出所信息
      getQueryDepartByArea(code) {
        queryDepartByArea({type: 2, code})
          .then(res => {
            if (res.success) {
              const { result } = res
              this.$set(this.model, 'currentPoliceStation', result && result.departName? result.departName: '')
            } else {
              this.$message.warn(res.message)
            }
          })
          .catch(e => {
            this.$message.warn('请求失败！')
            // this.confirmLoading = false
          })
      }
    }
  }
</script>
